<template>
  <div class>
    <div ref="box" style="width:400px;height:260px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  methods: {
    print() {
      let print = echarts.init(this.$refs.box)
      let option = {
        tooltip: {
          trigger: "item"
        },
        color: ["red", "yellow", "skyblue", "blue"],
        // color 设置颜色 展示文本
        legend: {
          top: "5%",
          left: "left",
          orient: "vertical", // 标题默认水平 垂直
          data: [
            { name: "搜索引擎", icon: "circle" },
            { name: "直接访问", icon: "circle" },
            { name: "邮件营销", icon: "circle" },
            { name: "联盟广告", icon: "circle" }
          ] // 标题内容
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false, // 设置false表示 悬停只会单独展示一个文本
              position: "center" // 展示文本位置 默认是在圈外
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              // label:false show:false 为单独控制
              // 通常单独控制的属性 都在这设置
              // 
              // itemStyle: {
              //   color: '#a90000'
              // },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
            ]
          }
        ]
      };
      print.setOption(option)
    }
  },
  mounted () {
    this.print()
  }
};
</script>

<style>
</style>